<template>
	<view>
		<view class="statusBox bb u-flex u-col-center">
			<image src="../../static/完成.png" mode="" style="width: 80rpx;height: 80rpx;" v-if="info.process_status == '已完成'"></image>
			<image src="../../static/进行中.png" mode="" style="width: 64rpx;height: 64rpx;" v-if="info.process_status == '进行中'"></image>
			{{info.process_status || '未知状态'}} 
		</view>

		<view class="priceBox bb" style="height: auto;">
			<view style="font-size: 32rpx;text-align: center;margin-bottom: 32rpx;">
				本次磅单信息
			</view>
			<view v-for="item in infoItemList" :key="item.label" class="u-flex u-row-between"
				style="margin-top: 10rpx;margin-bottom: 32rpx;">
				<view style="font-size: 28rpx;color: rgba(51, 51, 51, 1);">
					{{item.label}}
				</view>
				<view class="rightBox" style="max-width: 400rpx;">
					{{item.value}}
				</view>
			</view>

		</view>

		<view class="priceBox bb" style="height: auto;">
			<view style="font-size: 32rpx;text-align: center;margin-bottom: 32rpx;">
				车头视频
			</view>
			<video id="myVideo" :src="info.monitor_record_list[0].play_url" controls></video>
			<view style="font-size: 32rpx;text-align: center;margin-bottom: 32rpx;margin-top: 32rpx;">
				车尾视频
			</view>
			<video id="myVideo" :src="info.monitor_record_list[1].play_url" controls></video>
		</view>
	
		<uni-popup ref="popup" type="center" @change="popupChange">
			<view class="popupBox u-flex-col u-col-center">
				<image src="../../static/dollar_outlined@2x.png" style="width: 200rpx;height: 200rpx;" class="icon"
					mode=""></image>
				<view style="font-size: 36rpx;margin-top: 108rpx">过磅总费用</view>
				<view style="color: rgba(0, 0, 0, 1);font-weight: 900;font-size: 96rpx;margin-top: 14rpx;">
					¥{{total_fee}}</view>
				<view class="payButton" @click="onPay">立即支付</view>
			</view>
		</uni-popup>

		<uni-popup ref="payPopup" type="center">
			<view class="popupBox u-flex-col u-col-center">
				<image src="../../static/pay.png" style="width: 200rpx;height: 200rpx;" class="icon" mode=""></image>
				<view style="font-size: 36rpx;margin-top: 108rpx">¥{{total_fee}}</view>
				<view style="color: rgba(0, 0, 0, 1);font-weight: 900;font-size: 96rpx;margin-top: 14rpx;">支付成功</view>
				<textarea class="textareaBox bb" value="已提交打印请留意票据出口"></textarea>
			</view>
		</uni-popup>

		<view class="shareBox" style="display: flex;" v-if="!isShare">
			<view @click="onSupplement" class="u-flex u-row-center"
				style="width: 320rpx;height: 80rpx;border-radius: 200rpx;border: 2rpx solid rgba(0, 0, 0, 1);margin: 20rpx 0 0 32rpx;">
				<image src="../../static/receipt_outlined@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view style="font-weight: 500;margin-left: 16rpx;">补打磅单</view>
			</view>
			<button open-type="share" plain class="u-flex u-row-center"
				style="width: 320rpx;height: 80rpx;border-radius: 200rpx;border: 2rpx solid rgba(0, 0, 0, 1);margin: 20rpx 0 0 46rpx;">
				<image src="../../static/reply@2x.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view style="font-weight: 500;margin-left: 16rpx;">转发磅单</view>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getPoundBillDetail,
		createOrder,
		orderPay
	} from '../../common/api.config.js'
	import {
		parseTime
	} from '../../utils/index.js'
	export default {
		data() {
			return {
				id: '',
				info: null,
				pay_id: '',
				total_fee: '0',
				payInfo: {},
				pageFromQrcode: false,
				infoItemList: [{
						label: '单号',
						value: ''
					},
					{
						label: '开始时间',
						value: ''
					},
					{
						label: '结束时间',
						value: ''
					},
					{
						label: '车牌',
						value: ''
					},
					{
						label: '货物',
						value: ''
					},
					{
						label: '总重',
						value: ''
					},
					{
						label: '皮重',
						value: ''
					},
					{
						label: '净重',
						value: ''
					},
					{
						label: '应付',
						value: ''
					},
					{
						label: '实付',
						value: ''
					},
					{
						label: '地磅',
						value: ''
					},
					{
						label: '地址',
						value: ''
					}
				],
				payId:'',
				isShare:false
			}
		},
		onLoad(e) {
			console.log(e);
			// var pages = getCurrentPages();
			// var page = pages[pages.length - 1];
			// const opt = decodeURIComponent(page.options);
			// console.log('opt', opt);
			if (e.info) {
				this.isShare = true
				this.info = JSON.parse(decodeURIComponent(e.info))
				this.infoItemList[0].value = this.info.order_sn
				this.infoItemList[1].value = this.info.created_at || '-'
				this.infoItemList[2].value = this.info.finished_at || '-'
				this.infoItemList[3].value = this.info.car_plate
				this.infoItemList[4].value = this.info.goods_name || '-'
				this.infoItemList[5].value = (this.info.total_weight / 1000) + 'kg'
				this.infoItemList[6].value = (this.info.tare_weight / 1000) + 'kg'
				this.infoItemList[7].value = (this.info.net_weight / 1000) + 'kg'
				this.infoItemList[8].value = this.info.total_fee
				this.infoItemList[9].value = this.info.total_fee
				this.infoItemList[10].value = this.info.device_station
				this.infoItemList[11].value = this.info.device_address
			} else if (e.id) {
				this.id = e.id
				this.getinfo()
			} else if (e.scene) {
				this.id = e.scene
				this.getinfo()
				this.pageFromQrcode = true
			}
		},
		onShow() {
			if (this.payId) {
				this.checkPayStatus()
			}
		},
		methods: {
			popupChange(e){
				console.log(e);
				if(!e.show){
					this.payId = ''
				}
			},
			onPay() {
				var that = this
				// uni.showLoading({
				// 	title: '请求中'
				// })
				var that = this
				wx.navigateToMiniProgram({
					appId: 'wxbd08b4baa10fcc1d',
					path: 'pages/pay/pay',
					extraData: {
						"sign": this.payInfo.sign,
						"union_id": this.payInfo.union_id,
						"data": {
							"amount": this.payInfo.data.amount,
							"trade_no": this.payInfo.data.trade_no,
							"title": this.payInfo.data.title,
							"park_id": this.payInfo.data.park_id,
							"pay_type": this.payInfo.data.pay_type,
							"description": this.payInfo.data.description,
							"channel": this.payInfo.data.channel,
							"time_temp": this.payInfo.data.time_temp,
						}
					},
					envVersion: 'release', //要打开的小程序版本 - 正式版
					success(res) {
						// 打开成功
					}
				})
			},
			async checkPayStatus() {
				var that = this
				const {
					data,
					code,
					msg
				} = await getPoundBillDetail({
					id: this.payId,
				})
				this.payId = ''
				console.log(data);
				if (code == 1) {
					if (data.status_name == "待付款") {
						uni.showToast({
							title: '您取消了支付',
							icon: 'none'
						})
						this.$refs.popup.close()
					} else if (data.status_name == "支付成功") {
						that.$refs.popup.close()
						that.$refs.payPopup.open('center')
						that.getinfo()
					}
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					})
				}
			},
			parseTimeFn(times) {
				return parseTime(times)
			},
			async getinfo() {
				const {
					data,
					code
				} = await getPoundBillDetail({
					id: this.id
				})
				console.log(data);
				if (code == 1) {
					this.info = data
					this.infoItemList[0].value = data.order_sn
					this.infoItemList[1].value = data.created_at
					this.infoItemList[2].value = data.finished_at
					this.infoItemList[3].value = data.car_plate
					this.infoItemList[4].value = data.goods_name || '-'
					this.infoItemList[5].value = (data.total_weight / 1000) + 'kg'
					this.infoItemList[6].value = (data.tare_weight / 1000) + 'kg'
					this.infoItemList[7].value = (data.net_weight / 1000) + 'kg'
					this.infoItemList[8].value = data.total_fee
					this.infoItemList[9].value = data.total_fee
					this.infoItemList[10].value = data.device_station
					this.infoItemList[11].value = data.device_address
					uni.setNavigationBarTitle({
						title: data.car_plate
					})
				}
			},
			async onSupplement() {
				uni.showLoading({
					title: '请求中'
				})
				const {
					data,
					code,
					msg
				} = await createOrder({
					order_type: 2,
					car_plate: this.info.car_plate,
					weight: this.info.weight,
					device_id: this.info.device_id,
					complement_order_pid: this.info.id
				})
				uni.hideLoading()
				if (code == 1) {
					if (data.total_fee == '0.00') {
						uni.showToast({
							title: '补打成功',
							icon: 'success'
						})
						this.getinfo()
					} else {
						this.payId = data.id
						this.total_fee = data.total_fee
						this.getOrderPay(data.order_sn)
					}
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
				console.log(data, code);
			},
			async getOrderPay(order_sn) {
				const {
					data,
					code,
					msg
				} = await orderPay({
					order_sn,
					pay_channel: 'bolink'
				})
				if (code == 1) {
					this.payInfo = data
					this.$refs.popup.open('center')
				} else {
					uni.showToast({
						title: msg,
						icon: 'error'
					})
				}
			},
		},
		onShareAppMessage() {
			return {
				title: this.info.car_plate + ' - 磅单详情',
				path: 'pages/poundBillDetail/insidePage?info=' + encodeURIComponent(JSON.stringify(this.info))
			}
		},
	}
</script>

<style lang="scss">
	view {
		color: rgba(51, 51, 51, 1);
	}

	.shareBox {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		width: 100vw;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
		height: 160rpx;
	}

	page {
		background: rgba(246, 246, 246, 1);
		padding-bottom: 180rpx;
	}

	.rightBox {
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		text-align: right;
	}

	.licensePlateBox {
		width: 200rpx;
		height: 72rpx;
		background: rgba(253, 209, 0, 1);
		border-radius: 8rpx;
		text-align: center;
		line-height: 72rpx;
		border: 4rpx solid #000;
	}

	.Box {
		width: 686rpx;
		// height: 668rpx;
		opacity: 1;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 12rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
		margin: 32rpx 0 0 32rpx;
		padding: 32rpx;

		.line {
			width: 622rpx;
			height: 2rpx;
			background: rgba(232, 232, 232, 1);
			margin-top: 30rpx;
		}

		.type {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
	}

	.status {
		width: 160rpx;
		height: 38rpx;
		border-radius: 200rpx;
		background: rgba(0, 155, 79, 1);
		font-size: 24rpx;
		font-weight: 500;
		line-height: 38rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		top: 130rpx;
		right: 32rpx;
	}

	.popupBox {
		width: 666rpx;
		height: 600rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);

		.textareaBox {
			width: 526rpx;
			height: 130rpx;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(245, 245, 245, 1);
			padding: 16rpx;
			margin-top: 14rpx;
		}

		.icon {
			position: absolute;
			top: -100rpx;
			left: 234rpx;
		}

		.payButton {
			width: 526rpx;
			height: 84rpx;
			line-height: 84rpx;
			border-radius: 42rpx;
			background: rgba(254, 240, 7, 1);
			font-weight: 500;
			text-align: center;
			margin-top: 100rpx;
		}
	}

	.priceBox {
		width: 686rpx;
		height: 264rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 12rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
		margin: 24rpx 0 0 32rpx;
		padding: 24rpx 32rpx;

		.redText {
			height: 72rpx;
			font-size: 40rpx;
			font-weight: 900;
			color: rgba(212, 48, 48, 1);
			width: 100%;
			text-align: right;
		}
	}

	// 分割
	.statusBox {
		width: 750rpx;
		height: 118rpx;
		background-color: #f1dc27;
		font-size: 42rpx;
		color: #fff;
		line-height: 118rpx;
		padding-left: 32rpx;
	}

	.topInfoBox {
		width: 686rpx;
		opacity: 1;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 12rpx 12rpx 0rpx rgba(0, 0, 0, 0.06);
		margin: 32rpx 0 0 32rpx;
		padding: 32rpx;

		.title {
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 32rpx;
		}
	}

	.quanquan {
		width: 16rpx;
		height: 16rpx;
		background: #ffffff;
		border-radius: 50%;
		border: 6rpx solid #f1dc27;
		margin: 0 24rpx;
	}

	#myVideo {
		width: 100%;
	}
</style>
